'use client'

import {useState} from 'react'
import type {ProColumns} from '@ant-design/pro-components'
import {ProTable} from '@ant-design/pro-components'
import {Button, message, Modal, Switch} from 'antd'
import {PlusOutlined} from '@ant-design/icons'

type UserItem = {
  id: string
  username: string
  realName: string
  role: string
  department: string
  email: string
  phone: string
  status: boolean
  createTime: string
  lastLoginTime: string
}

export default function UsersPage() {
  const [createModalVisible, setCreateModalVisible] = useState(false)

  const columns: ProColumns<UserItem>[] = [
    {
      title: '用户名',
      dataIndex: 'username',
      width: 120,
    },
    {
      title: '姓名',
      dataIndex: 'realName',
      width: 120,
    },
    {
      title: '角色',
      dataIndex: 'role',
      width: 120,
    },
    {
      title: '部门',
      dataIndex: 'department',
      width: 120,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: 180,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      width: 120,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (_, record) => (
        <Switch
          checked={record.status}
          onChange={(checked) => {
            message.success(`用户${checked ? '启用' : '禁用'}成功`)
          }}
        />
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 180,
      valueType: 'dateTime',
    },
    {
      title: '最后登录',
      dataIndex: 'lastLoginTime',
      width: 180,
      valueType: 'dateTime',
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="edit"
          onClick={() => {
            message.info('编辑功能开发中')
          }}
        >
          编辑
        </a>,
        <a
          key="delete"
          onClick={() => {
            Modal.confirm({
              title: '确认删除',
              content: '确定要删除这个用户吗？',
              onOk: () => {
                message.success('删除成功')
              },
            })
          }}
        >
          删除
        </a>,
        <a
          key="resetPwd"
          onClick={() => {
            Modal.confirm({
              title: '重置密码',
              content: '确定要重置该用户的密码吗？',
              onOk: () => {
                message.success('密码重置成功')
              },
            })
          }}
        >
          重置密码
        </a>,
      ],
    },
  ]

  const mockData: UserItem[] = [
    {
      id: '1',
      username: 'admin',
      realName: '系统管理员',
      role: '超级管理员',
      department: '技术部',
      email: 'admin@example.com',
      phone: '13800138000',
      status: true,
      createTime: '2024-03-01 10:00:00',
      lastLoginTime: '2024-03-10 15:30:00',
    },
    {
      id: '2',
      username: 'zhangsan',
      realName: '张三',
      role: '普通用户',
      department: '销售部',
      email: 'zhangsan@example.com',
      phone: '13800138001',
      status: true,
      createTime: '2024-03-02 11:00:00',
      lastLoginTime: '2024-03-10 14:20:00',
    },
  ]

  return (
    <ProTable<UserItem>
      columns={columns}
      dataSource={mockData}
      rowKey="id"
      search={{
        labelWidth: 120,
      }}
      toolBarRender={() => [
        <Button
          key="button"
          icon={<PlusOutlined />}
          type="primary"
          onClick={() => setCreateModalVisible(true)}
        >
          新建
        </Button>,
      ]}
    />
  )
} 